<template><div><h2 id="主题与颜色" tabindex="-1"><a class="header-anchor" href="#主题与颜色"><span>主题与颜色</span></a></h2>
<h3 id="切换主题" tabindex="-1"><a class="header-anchor" href="#切换主题"><span>切换主题</span></a></h3>
<p><code v-pre>Dcat Admin</code>支持主题切换功能，目前内置了三种主题色：<code v-pre>blue</code>、<code v-pre>blue-light</code>、<code v-pre>green</code>，可通过配置参数<code v-pre>admin.layout.color</code>进行切换。</p>
<p>打开配置文件<code v-pre>config/admin.php</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">     <span class="token string single-quoted-string">'layout'</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">         <span class="token string single-quoted-string">'color'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'blue'</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">         <span class="token operator">...</span></span>
<span class="line">     <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">     <span class="token operator">...</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>部分主题色预览</p>
<p><img src="@source/dcat-admin-2x/assets/images/39371a0d-7606-4581-a5bf-04b84a7e8fac-p1lAW4NpQi.png" alt=""><br>
<img src="@source/dcat-admin-2x/assets/images/d9de9c36-cdcd-400d-8159-3551d744a09a-ISATQMYO0i.png" alt=""><br>
<img src="@source/dcat-admin-2x/assets/images/aa0960c6-1343-4e51-81bb-43265adac53f-GBkt9jYnW0.png" alt=""></p>
<h3 id="自定义主题配色" tabindex="-1"><a class="header-anchor" href="#自定义主题配色"><span>自定义主题配色</span></a></h3>
<blockquote>
<p>需要注意的是，如果自定义了主题之后，每次更新新版本，都需要重新编译一次你的自定义主题！！！</p>
</blockquote>
<p>开发者可以通过这个功能随意添加自己想要的主题配色，在使用这个功能之前需要先安装<a href="http://nodejs.cn/" target="_blank" rel="noopener noreferrer">NodeJs</a>，没安装的同学前往<a href="http://nodejs.cn/" target="_blank" rel="noopener noreferrer">nodejs.cn/</a>下载安装即可。</p>
<p>安装完<code v-pre>NodeJs</code>之后可打开命令行运行<code v-pre>npm -v</code>测试一下是否安装成功。</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line"><span class="token function">npm</span> <span class="token parameter variable">-v</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果正常返回版本号，则说明已安装成功，同时建议使用淘宝镜像</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line"><span class="token function">npm</span> config <span class="token builtin class-name">set</span> registry https://registry.npm.taobao.org</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>然后运行以下命令编译自定义主题的文件，只需输入主题的名称和主题颜色代码(<code v-pre>十六进制</code>)即可。<br>
这里我们以生成一个<code v-pre>orange</code>主题为例</p>
<blockquote>
<p>这个命令第一次运行时需要较长时间，请耐心等待。如果运行失败，请尝试给<code v-pre>vendor</code>目录写权限。</p>
</blockquote>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan admin:minify orange <span class="token parameter variable">--color</span> fbbd08 <span class="token parameter variable">--publish</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>上面的命令的意思是生成一个<code v-pre>orange</code>主题，颜色代码为<code v-pre>#fbbd08</code>，并且生成之后自动发布静态资源。如果编译成功，命令行会输出以下内容</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line"><span class="token punctuation">..</span>.</span>
<span class="line"></span>
<span class="line"> DONE  Compiled successfully <span class="token keyword">in</span> 48001ms8:24:28 PM</span>
<span class="line"></span>
<span class="line"></span>
<span class="line">                                              Asset      Size  Chunks</span>
<span class="line">               Chunk Names</span>
<span class="line">               /resources/dist/adminlte/adminlte.js  <span class="token number">29.7</span> KiB       <span class="token number">0</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line">               /resources/dist/adminlte/adminlte</span>
<span class="line">           /resources/dist/adminlte/adminlte.js.map  <span class="token number">87.8</span> KiB       <span class="token number">0</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">[</span>dev<span class="token punctuation">]</span>         /resources/dist/adminlte/adminlte</span>
<span class="line">               /resources/dist/dcat/extra/action.js   <span class="token number">3.7</span> KiB       <span class="token number">1</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line">               /resources/dist/dcat/extra/action</span>
<span class="line">           /resources/dist/dcat/extra/action.js.map  <span class="token number">12.9</span> KiB       <span class="token number">1</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">[</span>dev<span class="token punctuation">]</span>         /resources/dist/dcat/extra/action</span>
<span class="line">          /resources/dist/dcat/extra/grid-extend.js  <span class="token number">4.87</span> KiB       <span class="token number">2</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line">               /resources/dist/dcat/extra/grid-extend</span>
<span class="line">      /resources/dist/dcat/extra/grid-extend.js.map  <span class="token number">21.7</span> KiB       <span class="token number">2</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">[</span>dev<span class="token punctuation">]</span>         /resources/dist/dcat/extra/grid-extend</span>
<span class="line">    /resources/dist/dcat/extra/resource-selector.js   <span class="token number">5.8</span> KiB       <span class="token number">3</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line">               /resources/dist/dcat/extra/resource-selector</span>
<span class="line">/resources/dist/dcat/extra/resource-selector.js.map    <span class="token number">24</span> KiB       <span class="token number">3</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">[</span>dev<span class="token punctuation">]</span>         /resources/dist/dcat/extra/resource-selector</span>
<span class="line">               /resources/dist/dcat/extra/upload.js  <span class="token number">17.2</span> KiB       <span class="token number">4</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line">               /resources/dist/dcat/extra/upload</span>
<span class="line">           /resources/dist/dcat/extra/upload.js.map  <span class="token number">66.8</span> KiB       <span class="token number">4</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">[</span>dev<span class="token punctuation">]</span>         /resources/dist/dcat/extra/upload</span>
<span class="line">                /resources/dist/dcat/js/dcat-app.js  <span class="token number">88.8</span> KiB       <span class="token number">5</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line">               /resources/dist/dcat/js/dcat-app</span>
<span class="line">            /resources/dist/dcat/js/dcat-app.js.map   <span class="token number">164</span> KiB       <span class="token number">5</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">[</span>dev<span class="token punctuation">]</span>         /resources/dist/dcat/js/dcat-app</span>
<span class="line">        resources/dist/adminlte/adminlte-orange.css   <span class="token number">656</span> KiB       <span class="token number">0</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line">        <span class="token punctuation">[</span>big<span class="token punctuation">]</span>  /resources/dist/adminlte/adminlte</span>
<span class="line">        resources/dist/dcat/css/dcat-app-orange.css    <span class="token number">43</span> KiB       <span class="token number">0</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line">               /resources/dist/adminlte/adminlte</span>
<span class="line">      resources/dist/dcat/extra/markdown-orange.css  <span class="token number">1.72</span> KiB       <span class="token number">0</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line">               /resources/dist/adminlte/adminlte</span>
<span class="line">          resources/dist/dcat/extra/step-orange.css  <span class="token number">8.56</span> KiB       <span class="token number">0</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line">               /resources/dist/adminlte/adminlte</span>
<span class="line">        resources/dist/dcat/extra/upload-orange.css  <span class="token number">6.42</span> KiB       <span class="token number">0</span>  <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span></span>
<span class="line">               /resources/dist/adminlte/adminlte</span>
<span class="line"></span>
<span class="line"></span>
<span class="line">Copied Directory <span class="token punctuation">[</span><span class="token punctuation">\</span>dcat-admin<span class="token punctuation">\</span>resources<span class="token punctuation">\</span>dist<span class="token punctuation">]</span> To <span class="token punctuation">[</span><span class="token punctuation">\</span>public<span class="token punctuation">\</span>vendors<span class="token punctuation">\</span>dcat-admin<span class="token punctuation">]</span></span>
<span class="line">Publishing complete.</span>
<span class="line">Compiled views cleared<span class="token operator">!</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>主题文件编译成功之后，还需要在<code v-pre>app/Admin/bootstrap.php</code>中加入以下代码</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name class-name-fully-qualified static-context">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Color</span><span class="token operator">::</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'orange'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'primary'</span>        <span class="token operator">=></span> <span class="token string single-quoted-string">'#fbbd08'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'primary-darker'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'#fbbd08'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'link'</span>           <span class="token operator">=></span> <span class="token string single-quoted-string">'#fbbd08'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>最后把你的配置参数<code v-pre>admin.layout.color</code>的值设置为<code v-pre>orange</code>就行了。</p>
<h3 id="深色模式" tabindex="-1"><a class="header-anchor" href="#深色模式"><span>深色模式</span></a></h3>
<p><img src="@source/dcat-admin-2x/assets/images/2cf9743f-f72a-499d-bee3-7a4a8aa164eb-LMpJ0aqPEv.png" alt=""></p>
<h4 id="启用切换按钮" tabindex="-1"><a class="header-anchor" href="#启用切换按钮"><span>启用切换按钮</span></a></h4>
<p>通过配置参数 <code v-pre>admin.layout.dark_mode_switch</code> 可以启用或禁用深色模式切换开关。开启后会在页面顶部导航栏中增加一个开关按钮，点击可以切换深色和明亮模式，并且会把状态保存在<code v-pre>localStorage</code>中。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">     <span class="token string single-quoted-string">'layout'</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">         <span class="token string single-quoted-string">'dark_mode_switch'</span> <span class="token operator">=></span> <span class="token constant boolean">true</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">         <span class="token operator">...</span></span>
<span class="line">     <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">     <span class="token operator">...</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下<br>
<img src="@source/dcat-admin-2x/assets/images/6b3d0113-1c5b-4e78-856a-92161c184294-sYc7E40tXr.gif" alt=""></p>
<h4 id="默认深色" tabindex="-1"><a class="header-anchor" href="#默认深色"><span>默认深色</span></a></h4>
<p>打开配置文件<code v-pre>config/admin.php</code>，写入</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">     <span class="token string single-quoted-string">'layout'</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">         <span class="token string single-quoted-string">'body_class'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'dark-mode'</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">         <span class="token operator">...</span></span>
<span class="line">     <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">     <span class="token operator">...</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="菜单样式" tabindex="-1"><a class="header-anchor" href="#菜单样式"><span>菜单样式</span></a></h3>
<h4 id="顶部横向-horizontal" tabindex="-1"><a class="header-anchor" href="#顶部横向-horizontal"><span>顶部横向 (Horizontal)</span></a></h4>
<p>设置配置参数 <code v-pre>admin.layout.horizontal_menu</code> 的值为 <code v-pre>true</code> 开启此功能，效果如下</p>
<p><img src="@source/dcat-admin-2x/assets/images/edb30958-787e-4e02-b3ba-779f90f53c56-SpmXMujJ3D.png" alt=""></p>
<h4 id="sidebar-separate" tabindex="-1"><a class="header-anchor" href="#sidebar-separate"><span>sidebar-separate</span></a></h4>
<p>通过配置参数 <code v-pre>admin.layout.sidebar_style</code> 可以配置菜单样式（如果配置文件中不存在这个参数则可以手动添加），支持三个值 <code v-pre>light</code>、<code v-pre>primary</code>、<code v-pre>dark</code>，默认为 <code v-pre>light</code></p>
<blockquote>
<p><code v-pre>sidebar_dark</code>参数即将被废弃！<code v-pre>sidebar_style</code>参数会覆盖<code v-pre>sidebar_dark</code>参数，只有当<code v-pre>sidebar_style</code>不存在时<code v-pre>sidebar_dark</code>才会生效！！！</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">     <span class="token string single-quoted-string">'layout'</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">          <span class="token comment">// 支持 light、primary、dark</span></span>
<span class="line">         <span class="token string single-quoted-string">'sidebar_style'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'light'</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">         <span class="token operator">...</span></span>
<span class="line">     <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">     <span class="token operator">...</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>light</code> 效果</p>
<p><img src="@source/dcat-admin-2x/assets/images/30bffc93-159d-4557-b1ad-fb281fcf6cae-Oam6CYOobf.jpeg" alt=""></p>
<p><code v-pre>primary</code> 效果</p>
<p><img src="@source/dcat-admin-2x/assets/images/59ea4f1a-7487-442a-82c0-37b5905afa6e-bBd7mGA1Pj.jpg" alt=""></p>
<p><img src="@source/dcat-admin-2x/assets/images/a6687d04-b46c-4bea-992c-09fd26b614d9-gC6pzUWN73.jpg" alt=""></p>
<h3 id="php颜色管理" tabindex="-1"><a class="header-anchor" href="#php颜色管理"><span>PHP颜色管理</span></a></h3>
<p>作为日常开发我们离不开颜色的使用，<code v-pre>Dcat Admin</code>内置了颜色管理模块，此功能可以很方便的配合主题切换功能，让页面颜色与主题色相适应！</p>
<p>通过 <code v-pre>Dcat\Admin\Admin::color()</code> 这个服务可以很轻松的获取常用颜色（可参考<a href="#%E9%A2%9C%E8%89%B2%E8%A1%A8%E4%B8%8E%E6%A0%B7%E5%BC%8F">颜色表与样式</a>）。</p>
<h4 id="获取内置颜色" tabindex="-1"><a class="header-anchor" href="#获取内置颜色"><span>获取内置颜色</span></a></h4>
<p>通过<code v-pre>Color::get</code>或魔术方法可以获取颜色代码，当通过<code v-pre>Color::get</code>获取的颜色不存在时，会返回参数的原始值。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// get 方法获取颜色</span></span>
<span class="line"><span class="token keyword">echo</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'primary'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 #5c6bc6</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 通过魔术方法获取颜色</span></span>
<span class="line"><span class="token keyword">echo</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">primary</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 #5c6bc6</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="颜色淡化" tabindex="-1"><a class="header-anchor" href="#颜色淡化"><span>颜色淡化</span></a></h4>
<p>通过<code v-pre>Color::lighten</code>方法或魔术方法可以获取淡化后的颜色的16进制颜色代码。</p>
<p><code v-pre>Color::lighten</code>方法接收两个参数：</p>
<ul>
<li><code v-pre>$name</code> <code v-pre>string</code> 颜色别名</li>
<li><code v-pre>$amt</code> <code v-pre>int</code> 颜色偏差值，值越大颜色越<code v-pre>淡</code></li>
</ul>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">echo</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">lighten</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'primary'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 #6675d0</span></span>
<span class="line"><span class="token comment">// 也可以这样使用，注意这里的参数要传负数</span></span>
<span class="line"><span class="token keyword">echo</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">primary</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 #6675d0</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>也支持直接传颜色代码</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">echo</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">lighten</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'#5c6bc6'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 #6675d0</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="颜色深化" tabindex="-1"><a class="header-anchor" href="#颜色深化"><span>颜色深化</span></a></h4>
<p>通过<code v-pre>Color::darken</code>方法或魔术方法可以获取深化后的颜色的16进制颜色代码。</p>
<p><code v-pre>Color::darken</code>方法接收两个参数：</p>
<ul>
<li><code v-pre>$name</code> <code v-pre>string</code> 颜色别名</li>
<li><code v-pre>$amt</code> <code v-pre>int</code> 颜色偏差值，值越大颜色越<code v-pre>深</code></li>
</ul>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">echo</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">darken</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'primary'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 #5261bc</span></span>
<span class="line"><span class="token comment">// 也可以这样使用</span></span>
<span class="line"><span class="token keyword">echo</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">primary</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 #5261bc</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>也支持直接传颜色代码</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">echo</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">darken</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'#5c6bc6'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 #5261bc</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="颜色透明化" tabindex="-1"><a class="header-anchor" href="#颜色透明化"><span>颜色透明化</span></a></h4>
<p>通过<code v-pre>Color::alpha</code>方法可以设置颜色的透明度。</p>
<p><code v-pre>Color::alpha</code>方法接收两个参数：</p>
<ul>
<li><code v-pre>$name</code> <code v-pre>string</code> 颜色别名</li>
<li><code v-pre>$alpha</code> <code v-pre>float</code> 透明度，<code v-pre>0 ~ 1</code>之间的值，值越小透明度越高</li>
</ul>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">echo</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">alpha</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'primary'</span><span class="token punctuation">,</span> <span class="token number">0.1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 rgba(92, 107, 198, 0.1)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>也支持直接传颜色代码</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">echo</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">alpha</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'5c6bc6'</span><span class="token punctuation">,</span> <span class="token number">0.1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 rgba(92, 107, 198, 0.1)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="获取所有内置颜色" tabindex="-1"><a class="header-anchor" href="#获取所有内置颜色"><span>获取所有内置颜色</span></a></h4>
<p>通过<code v-pre>Color::all</code>方法可以获取所有内置颜色的16进制代码，此方法返回一个数组</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$allColors</span> <span class="token operator">=</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="js颜色管理" tabindex="-1"><a class="header-anchor" href="#js颜色管理"><span>JS颜色管理</span></a></h3>
<p><code v-pre>JS</code>模块中同样也包含颜色管理功能，通过<code v-pre>Dcat.color</code>对象可以像在PHP代码中一样管理颜色。</p>
<h4 id="获取内置颜色-1" tabindex="-1"><a class="header-anchor" href="#获取内置颜色-1"><span>获取内置颜色</span></a></h4>
<p>在<code v-pre>JS</code>代码中可以通过以下三种方式获取颜色代码</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">script</span><span class="token punctuation">(</span></span>
<span class="line"><span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">    <span class="token comment">// 方式1</span></span>
<span class="line">    <span class="token keyword">var</span> primary <span class="token operator">=</span> Dcat<span class="token operator">.</span>color<span class="token operator">.</span>primary<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 方式2</span></span>
<span class="line">    <span class="token keyword">var</span> primary <span class="token operator">=</span> Dcat<span class="token operator">.</span>color<span class="token punctuation">[</span><span class="token string single-quoted-string">'primary'</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 方式3</span></span>
<span class="line">    <span class="token keyword">var</span> primary <span class="token operator">=</span> Dcat<span class="token operator">.</span>color<span class="token operator">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'primary'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span>primary<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 打印 #5c6bc6</span></span>
<span class="line"><span class="token constant">JS</span></span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="颜色淡化-1" tabindex="-1"><a class="header-anchor" href="#颜色淡化-1"><span>颜色淡化</span></a></h4>
<p>通过<code v-pre>Dcat.color.lighten</code>方法或魔术方法可以获取淡化后的颜色的16进制颜色代码。</p>
<p><code v-pre>color.lighten</code>方法接收两个参数：</p>
<ul>
<li><code v-pre>name</code> <code v-pre>string</code> 颜色别名</li>
<li><code v-pre>amt</code> <code v-pre>int</code> 颜色偏差值，值越大颜色越<code v-pre>淡</code></li>
</ul>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">script</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">    <span class="token keyword">var</span> primary <span class="token operator">=</span> Dcat<span class="token operator">.</span>color<span class="token operator">.</span><span class="token function">lighten</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'primary'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span>primary<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 #6675d0</span></span>
<span class="line"><span class="token constant">JS</span>    </span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>也支持直接传颜色代码</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">var</span> primary <span class="token operator">=</span> Dcat<span class="token punctuation">.</span>color<span class="token punctuation">.</span><span class="token function">lighten</span><span class="token punctuation">(</span><span class="token string">'5c6bc6'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>primary<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 #6675d0</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="颜色深化-1" tabindex="-1"><a class="header-anchor" href="#颜色深化-1"><span>颜色深化</span></a></h4>
<p>通过<code v-pre>Dcat.color.darken</code>方法或魔术方法可以获取深化后的颜色的16进制颜色代码。</p>
<p><code v-pre>color.darken</code>方法接收两个参数：</p>
<ul>
<li><code v-pre>name</code> <code v-pre>string</code> 颜色别名</li>
<li><code v-pre>amt</code> <code v-pre>int</code> 颜色偏差值，值越大颜色越<code v-pre>深</code></li>
</ul>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">script</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">    <span class="token keyword">var</span> primary <span class="token operator">=</span> Dcat<span class="token operator">.</span>color<span class="token operator">.</span><span class="token function">darken</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'primary'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span>primary<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 #5261bc</span></span>
<span class="line"><span class="token constant">JS</span>    </span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>也支持直接传颜色代码</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">var</span> primary <span class="token operator">=</span> Dcat<span class="token operator">.</span>color<span class="token operator">.</span><span class="token function">darken</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'5c6bc6'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span>primary<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 #5261bc</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="颜色透明化-1" tabindex="-1"><a class="header-anchor" href="#颜色透明化-1"><span>颜色透明化</span></a></h4>
<p>通过<code v-pre>Dcat.color.alpha</code>方法可以设置颜色的透明度。</p>
<p><code v-pre>color.alpha</code>方法接收两个参数：</p>
<ul>
<li><code v-pre>$name</code> <code v-pre>string</code> 颜色别名</li>
<li><code v-pre>$alpha</code> <code v-pre>float</code> 透明度，<code v-pre>0 ~ 1</code>之间的值，值越小透明度越高</li>
</ul>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">script</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span> </span>
<span class="line">    <span class="token keyword">var</span> primary <span class="token operator">=</span> Dcat<span class="token operator">.</span>color<span class="token operator">.</span><span class="token function">alpha</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'primary'</span><span class="token punctuation">,</span> <span class="token number">0.1</span><span class="token punctuation">)</span> </span>
<span class="line"></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span>primary<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 rgba(92, 107, 198, 0.1)</span></span>
<span class="line"><span class="token constant">JS</span>    </span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>也支持直接传颜色代码</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">script</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">    <span class="token keyword">var</span> primary <span class="token operator">=</span> Dcat<span class="token operator">.</span>color<span class="token operator">.</span><span class="token function">alpha</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'5c6bc6'</span><span class="token punctuation">,</span> <span class="token number">0.1</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span>primary<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 rgba(92, 107, 198, 0.1)</span></span>
<span class="line"><span class="token constant">JS</span>    </span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="获取所有内置颜色-1" tabindex="-1"><a class="header-anchor" href="#获取所有内置颜色-1"><span>获取所有内置颜色</span></a></h4>
<p>通过<code v-pre>Dcat.color.all</code>方法可以获取所有内置颜色的16进制代码，此方法返回一个键值对对象。</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">var</span> allColors <span class="token operator">=</span> Dcat<span class="token punctuation">.</span>color<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="颜色表与样式" tabindex="-1"><a class="header-anchor" href="#颜色表与样式"><span>颜色表与样式</span></a></h3>
<p><code v-pre>Dcat Admin</code>前端是采用<code v-pre>bootstrap4</code>编写的，因此首先要学习<a href="https://getbootstrap.net/docs/utilities/colors/" target="_blank" rel="noopener noreferrer">Bootstrap4 颜色(Color)样式</a>的使用，这里不再赘述相关内容。</p>
<p>以下是<code v-pre>Dcat Admin</code>中常用颜色样式表，其中以<code v-pre>.bg-*</code> 开头的样式是背景色，以<code v-pre>.text-</code> 开头的样式是文本颜色</p>
<p><img src="@source/dcat-admin-2x/assets/images/9133d55f-4630-46fa-8c94-ca06691e2c6b-2lwz7OPjCe.png" alt=""><br>
<img src="@source/dcat-admin-2x/assets/images/03a2b165-1ddb-44c9-9dbc-1956226c1356-0brQIB5iTW.png" alt=""><br>
<img src="@source/dcat-admin-2x/assets/images/fb4290ca-4552-4ffb-9b94-3d0c07c77c22-NbOWciPmPY.png" alt=""><br>
<img src="@source/dcat-admin-2x/assets/images/3042b71d-dbfe-4fc3-9665-753776407a11-LSH1GqMQDe.png" alt=""></p>
</div></template>


